<style>
    :root {
      --color: #4f81bd;
      --dark: #366092;
    }

    html {
      font-size: 16px;
    }

    body {
      box-sizing: border-box;
      margin: 0;
      font-size: 1rem;
      font-family: BlinkMacSystemFont, "Segoe UI", 'Microsoft YaHei';
      line-height: 1.5;
    }

    body * {
      box-sizing: inherit;
    }

    dl {
      margin: 0;
    }

    h1,
    h2 {
      margin: 0;
      font: inherit;
    }

    hr {
      margin: 0;
      border: 0;
      border-bottom: 4px solid var(--color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    }

    p {
      margin: 0;
    }

    .container {
      width: 860px;
      margin: 0 auto;
      padding: 2rem 0;
    }

    .clearfix {
      position: relative;
      overflow: auto;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .info_list {
      position: relative;
    }

    .info_list dt {
      position: absolute;
      top: 0;
      left: 0;
    }

    .text_bold {
      font-weight: 700;
    }

    /* header */

    .header_title {
      background-image: linear-gradient(#e5004e, #851f57);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 4em;
      font-weight: 700;
      font-style: italic;
      line-height: 1.2;
      float: right;
    }

    .header_sub {
      position: absolute;
      right: 0;
      bottom: 0;
      color: var(--color);
      font-size: 1.9em;
    }

    .header_info {
      padding: 1rem 0 2.5rem;
    }

    .header_address dd {
      padding-left: 3rem;
    }

    .header_order dt {
      width: 6rem;
      text-align: right;
    }

    .header_order dd {
      padding-left: 10rem;
      text-align: right;
    }

    /* content */

    main {
      margin-bottom: 1.5rem;
      padding-bottom: .5rem;
      border: 2px solid var(--dark);
    }

    .content_title {
      padding: .1rem .6rem;
      background-color: var(--color);
      color: #fff;
      font-size: 1.3em;
    }

    .content_box {
      padding: .5rem;
    }

    .content_footer {
      margin-top: 3rem;
    }

    .content_table {
      margin-bottom: 1rem;
      padding: 0;
    }

    .content_table table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .content_table th,
    .content_table td {
      padding: .4rem;
      text-align: center;
    }

    .content_table th {
      width: 20%;
      padding: .2rem .4rem;
      background-color: var(--color);
      color: #fff;
    }

    .content_table tr th:first-child,
    .content_table tr td:first-child {
      text-align: left;
    }
    .content_table th:nth-last-child(1),
    .content_table th:nth-last-child(2),
    .content_table td:nth-last-child(1),
    .content_table td:nth-last-child(2) {
      text-align: right;
    }

    .content_table tr:nth-last-child(1) td {
      border-top: 2px solid var(--dark);
      border-bottom: 2px solid var(--dark);
    }

    .content_info {
      padding: 2rem 0;
    }

    /*.content_info .info_list {*/
      /*margin-left: 4rem;*/
    /*}*/

    .content_info dd {
      padding-left: 7rem;
    }

    /* footer */
    .footer_box {
      padding: .4rem .6rem;
    }

    .footer_touch {
      padding-right: 2rem;
    }

    .footer_touch dd {
      padding-left: 4rem;
    }

    .order{
      float: right;
      letter-spacing: -0.0331em;
      word-spacing: 0.2522em;
      font-size: 1.850516em;
      font-family: "PLCMLM+Arial-BoldMT";
      color: #000000;
      font-weight: bold;
    }
  </style>
  <div class="container">
    <header class="header_box">
      <div class="clearfix">
        <h1 class="header_title">SUNRUN</h1>
      </div>
      <!--<hr>-->
      <div class="header_info clearfix">
        <div class="header_address fl">
          <dl class="info_list">
            <dt><%=custCompanyName%></dt>
            <dd>&nbsp;</dd>
          </dl>
          <dl class="info_list">
            <dt>Att.:</dt>
            <dd>Richard</dd>
            <dd>4F HNA Tower </dd>
            <dd>No. 898 Puming Road</dd>
            <dd>Shanghai, China</dd>
          </dl>
        </div>
        <div class="header_order fr">
            <dl class="info_list">
              <dt>Our ref.:</dt>
              <dd><%=orderNo%> </dd>
            </dl>
            <dl class="info_list">
              <dt>Your ref.:</dt>
              <dd><%=custOrderNo%></dd>
            </dl>
            <dl class="info_list">
              <dt>Date</dt>
              <dd><%=orderTime%></dd>
            </dl>
            <dl class="info_list">
              <dt>Page:</dt>
              <dd>1</dd>
            </dl>
        </div>
      </div>
    </header>
    <div class="clearfix">
      <div class="order">ORDER CONFIRMATION</div>
    </div>
    <hr>
    <div style="padding: .5rem">
      <p>With reference to correspondence, we are pleased to confirm the following order:</p>
      <div class="content_info">
        <div class="left" style="width: 422px;display: inline-block;">
          <dl class="info_list">
            <dt>Vessel name:</dt>
            <dd><%=shipName%></dd>
          </dl>
          <dl class="info_list">
            <dt>Delivery port:</dt>
            <dd><%=destinationPort%></dd>
          </dl>
          <dl class="info_list">
            <dt>Delivery date:</dt>
            <dd><%=transportStartTime%> to <%=transportEndTime%></dd>
          </dl>
          <dl class="info_list">
            <dt>ETA:</dt>
            <dd><%=sailStartTime%>-<%=sailEndTime%></dd>
          </dl>
        </div>

        <div class="right" style="display: inline-block">
          <dl class="info_list">
            <dt>IMO number:</dt>
            <dd><%=imoCode%></dd>
          </dl>
          <dl class="info_list">
            <dt>Berth/Position:</dt>
            <dd><%=mooringSite%></dd>
          </dl>
          <dl class="info_list">
            <dt>Delivery hours:</dt>
            <dd><%=transportDuration%> <%=transportDurationUnit%></dd>
          </dl>
          <dl class="info_list">
            <dt>ETD:</dt>
            <dd><%=reachStartTime%>-<%=reachEndTime%></dd>
          </dl>
        </div>

      </div>

    </div>
    <hr>
    <section class="content_box content_table">
      <table>
        <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
          <th>Price</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
       <%for(var index = 0; index < orderGoods.length; index++) {%>
        <tr>
          <td><%=orderGoods[index].goodsName%></td>
          <td><%=orderGoods[index].goodsNum%></td>
          <td><%=orderGoods[index].goodsCurrencyType%></td>
          <td><%=orderGoods[index].goodsPrice%>/<%=orderGoods[index].goodsUnit%></td>
        </tr>
         <%}%>
        </tbody>
      </table>
    </section>
    <section class="content_box">
      <div class="content_info">
        <dl class="info_list">
          <dt>Payment terms:</dt>
          <dd><%=paymentClause%></dd>
        </dl>
        <dl class="info_list">
          <dt>Buyer:</dt>
          <dd><%=purchaser%></dd>
        </dl>
        <dl class="info_list">
          <dt>Agent:</dt>
          <dd><%=agent%></dd>
        </dl>
        <dl class="info_list">
          <dt>Account NO.:</dt>
          <dd><%=note%></dd>
        </dl>
      </div>
      <div>
        <div>
          <p>Contractual terms:</p>
          <p><%=contractClause%></p>
        </div>
        <div style="margin:30px 0">
          <p>Best regards</p>
          <strong ><%=companyName%></strong>
          <p><%=representativeName%> As representative only</p>
          <p>Direct line: <%=representativePhone%></p>
        </div>
      </div>

    </section>
    <hr>
    <footer class="footer_box clearfix">
      <div class="footer_address fl">
        <p><%=companyName%></p>
        <p><%=companyAddress%></p>
      </div>
      <div class="footer_touch fr">
        <dl class="info_list">
          <dt>Phone:</dt>
          <dd><%=companyPhone%></dd>
        </dl>
        <dl class="info_list">
          <dt>Fax:</dt>
          <dd><%=companyFax%></dd>
        </dl>
        <dl class="info_list">
          <dt>E-mail:</dt>
          <dd><%=companyEmail%></dd>
        </dl>
      </div>
    </footer>
  </div>
